﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="~/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="~/lib/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css" />
    <link href="~/lib/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/css/common.css" rel="stylesheet" type="text/css" />
    <script src="~/lib/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="~/lib/ligerUI/js/ligerui.all.js"></script>
    <script src="~/Scripts/common.js"></script>
    <script src="~/Scripts/echarts.min.js" type="text/javascript"></script>
    <script>
        $(function () {
            var data;
            var queryData = {
                year: $("#hdnYear").val(),
                quarter: $("#hdnQuarter").val(),
                month: $("#hdnMonth").val(),
                areaID: $("#hdnAreaID").val()
            }

            $.ajax({
                url: "/AdverseEvent/AdverseEventSummary/YcSearch?ram" + Math.random(),
                type: "post",
                async: false,
                data: queryData,
                success: function (r) {
                    data = $.parseJSON(r);
                }
            });

            var rows = data.Rows;
            $("#maingrid").ligerGrid({
                data: { Rows: rows },
                usePager: false,
                rownumbers: true,
                columns: [
                    { display: '月份/类型', name: 'Month' },
                    { display: '压疮(科内)）', name: 'YcKeNei' },
                    { display: '压疮(院外)', name: 'YcYuanWai' },
                    { display: '压疮(他科)', name: 'YcTaKe' },
                    { display: '总计', name: 'Total' }
                ]
            });
            GridNoData($("#maingrid"));
            $(".l-grid").height($(".l-grid").height() - 1);

            var totalRow = rows[rows.length - 1];
            var legendData = ["压疮(科内)", "压疮(院外)", "压疮(他科)"];
            var seriesData = [
                { name: "压疮(科内)", value: totalRow.YcKeNei },
                { name: "压疮(院外)", value: totalRow.YcYuanWai },
                { name: "压疮(他科)", value: totalRow.YcTaKe },

            ];

            var myChart = echarts.init(document.getElementById('mainecharts'));
            option = {
                title: {
                    text: '压疮占比情况',
                    subtext: '',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: legendData
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: false, readOnly: false, width: '50%' },
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 500
                                }
                            }
                        },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                series: [
                    {
                        name: '压疮类型',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: seriesData
                    }
                ]
            };
            myChart.setOption(option);
        });
    </script>
</head>
<body>
    <div class="searchbar" style="padding-left:10px;">
        <input id=" btnback" type="button" value="返回" class="l-button-cancel" onclick="javascript: history.back();" />
    </div>
    <div id="maingrid"></div>
    <div style="margin-top:30px;width:100%; text-align:center;">
        <div id="mainecharts" style="width:600px;height:300px;margin:0px auto;"></div>
    </div>
    <input type="hidden" id="hdnYear" value="@(ViewBag.Year)" />
    <input type="hidden" id="hdnQuarter" value="@(ViewBag.Quarter)" />
    <input type="hidden" id="hdnMonth" value="@(ViewBag.Month)" />
    <input type="hidden" id="hdnAreaID" value="@(ViewBag.AreaID)" />
</body>
</html>
